<template>
  <div>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="Brokers 列表概要信息">

      <div slot="extra">
        <a-button shape="circle" icon="reload" @click="loadData"></a-button>
      </div>

      <a-table
        :columns="columns"
        :dataSource="data"
        :loading="loading"
        rowKey="id"
        :showHeader="false"
        :pagination="false"
        bordered
      >

        <template slot="id" slot-scope="text, record">
          <a href="javascript:;">{{record.broker.id}}</a>
        </template>

        <template slot="host" slot-scope="text, record">
          <div>Host: {{record.broker.host}}</div>
          <div>Port: {{record.broker.port}}</div>
          <div>JMX Port: {{record.broker.jmxPort}}</div>
        </template>

        <template slot="os-metrics" slot-scope="text, record">
          <broker-o-s-metric :metrics="record.metrics" />
        </template>

        <template slot="message-metrics" slot-scope="text, record">
          <broker-message-metric :metrics="record.metrics" />
        </template>
      </a-table>

    </a-card>
  </div>
</template>

<script>
  import kafkamanagerApi from '@/api/kafkamanager'

  export default {
    name: 'Brokers',
    components: {
      'BrokerOSMetric': () => import('./modules/BrokerOSMetric'),
      'BrokerMessageMetric': () => import('./modules/BrokerMessageMetric'),
    },
    data() {
      return {
        loading: false,
        columns: [{
          scopedSlots: {customRender: 'id'},
          width: '50px'
        }, {
          scopedSlots: {customRender: 'host'},
          width: '200px'
        }, {
          scopedSlots: {customRender: 'os-metrics'},
        }, {
          scopedSlots: {customRender: 'message-metrics'},
        }],
        brokersMetrics: [
          /*{
            id: '1',
            host: 'localhost',
            port: '9091',
            jmxPort: '9097',
          }, {
            id: '2',
            host: 'localhost',
            port: '9092',
            jmxPort: '9098',
          }, {
            id: '3',
            host: 'localhost',
            port: '9093',
            jmxPort: '9099',
          }*/
        ]
      }
    },
    computed: {
      data() {
        return this.brokersMetrics
      }
    },
    mounted() {
      this.loadData()
    },
    methods: {
      loadBrokers() {
        let clusterCode = this.$route.params.clusterCode;
        this.loading = true;
        kafkamanagerApi.listClusterBrokersMetrics(clusterCode).then(res => {
          res.forEach(function(item){
            item.id = item.broker.id;
          });
          this.brokersMetrics = res;
        }).catch(err => {
          this.$message.error(err.message);
        }).finally(() => {
          this.loading = false;
        })
      },
      loadData() {
        this.loadBrokers();
      },
    }
  }
</script>

<style lang="less" scoped>
  .ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }

  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;

    span {
      line-height: 20px;
    }

    p {
      margin-top: 4px;
      margin-bottom: 0;
      line-height: 22px;
    }
  }
</style>
